<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>All %SYSTEM_NAME% Cameras</title>
	<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>-->
	<script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
	<script type="text/javascript">
		var camData = eval("%ALL_CAMERAS_JS_ARRAY%");
		var imagesWide;
		var maxImagesWide = 12;
		$(function ()
		{
			imagesWide = parseInt($.cookie("imageswide"));
			if (!imagesWide)
				imagesWide = 4;
			if (imagesWide < 1)
				imagesWide = 1;
			if (imagesWide > maxImagesWide)
				imagesWide = maxImagesWide;
			for (var i = 0; i < camData.length; i++)
				AddCamera(camData[i][0], camData[i][1], camData[i][2], camData[i][3], camData[i][4], camData[i][5], camData[i][6]);
			doResize();
		});
		function AddCamera(id, name, imgsrc, imglink, namelink, overlay, dateMs)
		{
			var imgAge = new Date().getTime() - dateMs;
			if (imgAge < 12 * 60 * 60 * 1000) // 12 hours
				overlay = "";
			$("body").append('<div class="camdiv">'
				+ '<div class="imgwrapper">'
				 + '<div class="verticalAlignHelper"></div>'
				 + '<a href="' + imglink + '">'
				 + (overlay.length > 0 ? '<div class="camoverlay"><div class="verticalAlignHelper"></div><div class="overlaytext">' + overlay + '</div></div>' : '') + '<img src="' + imgsrc + '" /></a>'
				+ '</div>'
			   + '<div class="camname"><a href="' + namelink + '">' + name + '</a>'
			  + '</div>');
		}
		$(window).resize(function () { doResize() });
		$(window).load(function () { doResize() });
		var lastImagesWide = 0;
		function doResize(doRecursive)
		{
			console.log("imagesWide: " + imagesWide);
			var windowW = $(window).width();
			var windowH = $(window).height();
			var marginpx = 20;
			if (imagesWide > 4)
				marginpx = Math.max(2, marginpx - ((imagesWide - 4) * 2));
			if (windowW < 400)
				marginpx = Math.max(5, marginpx * (windowW / 400));
			var availableW = windowW - (marginpx * 2 * imagesWide);
			var eachImgMaxW = parseInt(availableW / imagesWide) - 1;
			var eachImgMaxH = parseInt(eachImgMaxW * 0.75)

			$("table").css("width", eachImgMaxW + "px").css("height", eachImgMaxH + "px");
			$(".imgwrapper").css("width", eachImgMaxW + "px").css("height", eachImgMaxH + "px");
			$("img").css("max-width", eachImgMaxW + "px").css("max-height", eachImgMaxH + "px");
			$(".camdiv").css("margin", marginpx + "px");

			$(".camoverlay,.camoverlay .verticalAlignHelper").css("height", eachImgMaxH);
			$(".camname").css("width", eachImgMaxW);
			if (lastImagesWide != imagesWide)
			{
				lastImagesWide = imagesWide;

				// Empty out the camrow objects
				$(".camdiv").each(function (idx, ele)
				{
					$("body").append(ele);
				});

				$(".camrow").remove();
				// Add new camrow objects
				var numRows = parseInt((camData.length + (imagesWide - 1)) / imagesWide);
				console.log("numRows: " + numRows);
				for (var i = 0; i < numRows; i++)
					$("body").append('<div id="camrow' + i + '" class="camrow"></div>');

				// Refill the camrow objects
				$(".camdiv").each(function (idx, ele)
				{
					$("#camrow" + parseInt(idx / imagesWide)).append(ele);
				});
			}
			if (doRecursive)
				setTimeout("doResize()", 0);  // Necessary because resizing can cause scroll bars to appear.  This will recalculate sizes with the new scroll bars.
		}
		function setImagesWide(diff)
		{
			imagesWide = parseInt(imagesWide) + parseInt(diff);
			if (imagesWide < 1)
				imagesWide = 1;
			if (imagesWide > maxImagesWide)
				imagesWide = maxImagesWide;
			$.cookie("imageswide", imagesWide, { expires: 365 });
			doResize(true);
		}
	</script>
	<style type="text/css">
		body
		{
			font-family: Sans-Serif;
			margin: 0px;
			overflow-x: hidden;
		}

		table
		{
			vertical-align: top;
			border-collapse: collapse;
			width: 320px;
			height: 240px;
		}

		td
		{
			padding: 0px;
			vertical-align: middle;
		}

		img
		{
			max-width: 320px;
			max-height: 240px;
			vertical-align: middle;
		}

		.camdiv
		{
			display: inline-block;
			position: relative;
			margin: 20px;
			vertical-align: top;
		}

		.camname
		{
			position: static;
			text-align: center;
			width: 100%;
		}

		.camoverlay
		{
			position: absolute;
			text-align: center;
			vertical-align: middle;
			display: inline-block;
			width: 100%;
		}

		.overlaytext
		{
			color: White;
			background-color: rgba(0,0,0,0.5);
			display: inline-block;
			vertical-align: middle;
			margin: 4px;
		}

		.verticalAlignHelper
		{
			height: 100%;
			display: inline-block;
			vertical-align: middle;
			width: 0px;
		}

		#headingdiv
		{
			margin: 8px;
		}

		.camrow
		{
			width: 200%;
		}

		#rootdiv
		{
			overflow: hidden;
		}
	</style>
</head>
<body>
	<!--<div id="rootdiv">-->
	<h2 id="headingdiv">
		%ALL_PAGE_HEADER% <span>
			- Show <a href="javascript:setImagesWide(1);">
				more
			</a> | <a href="javascript:setImagesWide(-1);">less</a> images per row
		</span>
	</h2>
	<!--</div>-->
</body>
</html>
